<script setup>
import { ref, computed } from 'vue'

const keyword = ref('')
const byType = ref('userId')

const records = ref([
  { id: 1, userId: 'U10001', idCard: '3101**********1234', company: '上海星河科技有限公司', type: '养老保险', status: '在缴', base: 8500 },
  { id: 2, userId: 'U20002', idCard: '4403**********5678', company: '深圳海纳百川信息科技', type: '医疗保险', status: '停保', base: 7000 }
])

const filtered = computed(() => {
  if (!keyword.value) return records.value
  const key = keyword.value.trim()
  if (byType.value === 'userId') {
    return records.value.filter(r => r.userId.includes(key))
  }
  return records.value.filter(r => r.idCard.includes(key))
})
</script>

<template>
  <div class="card">
    <h2>参保信息查询</h2>
    <div class="filters">
      <select v-model="byType">
        <option value="userId">按用户ID</option>
        <option value="idCard">按身份证号</option>
      </select>
      <input v-model="keyword" :placeholder="byType==='userId' ? '输入用户ID' : '输入身份证号'" />
    </div>

    <table class="table">
      <thead>
        <tr>
          <th>用户ID</th>
          <th>身份证号</th>
          <th>参保单位</th>
          <th>险种</th>
          <th>状态</th>
          <th>缴费基数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="r in filtered" :key="r.id">
          <td>{{ r.userId }}</td>
          <td>{{ r.idCard }}</td>
          <td>{{ r.company }}</td>
          <td>{{ r.type }}</td>
          <td>
            <span :class="['tag', r.status==='在缴' ? 'ok' : 'stop']">{{ r.status }}</span>
          </td>
          <td>{{ r.base }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.card { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-top: 0; }
h2 { color: var(--primary-blue); margin-bottom: 14px; font-size: 26px; }
.filters { display: flex; gap: 10px; margin-bottom: 14px; }
input, select { padding: 12px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 18px; }
.table { width: 100%; border-collapse: collapse; font-size: 18px; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid #eee; text-align: left; }
.tag { padding: 2px 8px; border-radius: 10px; font-size: 14px; }
.ok { background: #e8f5e9; color: #2e7d32; }
.stop { background: #ffebee; color: #d32f2f; }
</style>


